<template>
  <public-dialog
    title="修改借款信息"
    width="40%"
    confirm-button-title="确认"
    v-model:visible="visible"
    :confirm-disabled="isLoading"
    @on-confirm="onConfirm"
  >
    <el-form v-loading="isLoading" element-loading-text="表单数据提交中..." :model="form" :rules="rules" ref="formRef">
        <el-row class="d-flex j-sb">
            <el-col :span="11">
                <el-form-item label="借款合同号" prop="guaranteeContractNo">
                  <el-input v-model="form.loanContractNo" placeholder="借款合同号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="借款金额" prop="guaranteeAmount">
                    <el-input
                            v-model="form.loanAmount"
                            placeholder="借款金额"
                            @input="form.loanAmount = limitInputNum(form.loanAmount,10,4,true)"
                    ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="借款日期" prop="dateTime">
                    <el-date-picker
                            class="m-l10"
                            v-model="form.dateTime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="daterange"
                            size="large"
                            range-separator="-"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            @change="datePickerChange"
                    />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {reactive, ref} from "vue";
import {ElForm, ElFormItem, ElRow, ElCol, ElDatePicker, ElMessage} from "element-plus";
import {CBS} from "@/api/businessFinance";
import {limitInputNum, resetForm} from "@/common/utils/GlobalUtils";


const visible = ref(false);
const isLoading = ref(false);
const form = reactive({
    guaranteeId:'',
    loanContractNo:'',
    loanAmount:'',
    dateTime:'',
    loanStartTime:'',
    loanEndTime:'',
});

const rules = reactive({
    loanContractNo:[
        { required: true, message: '借款合同号不能为空!', trigger: 'blur' },
    ],
    loanAmount:[
        { required: true, message: '借款金额不能为空!', trigger: 'blur' },
    ],
    dateTime:[
        { required: true, message: '请选择借款日期!', trigger: 'change' },
    ]
});


/**
 * 起始日期
 */
const datePickerChange = (e) => {
    if(e===null || (e instanceof Array && e.length===0)){
        form.loanStartTime = '';
        form.loanEndTime = '';
        return;
    }
    form.loanStartTime = e[0];
    form.loanEndTime = e[1];
}

const formRef = ref(null);
const emits = defineEmits(['onSuccess']);

/**
 * 确认
 */
const onConfirm = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
          isLoading.value = true;
          CBS.updateBankGuarantee(form).then(res=>{
              if(res.code==='200'){
                  visible.value = false;
                  isLoading.value = false;
                  ElMessage.success('操作成功!');
                  emits('onSuccess');
              }else{
                  visible.value = false;
                  ElMessage.error(res.msg);
              }
          }).catch(error => {
              ElMessage.error(error);
              visible.value = false;
              isLoading.value = false;
          });
        }
    });
}

/**
 * 打开弹窗
 */
const openPopup = (guaranteeId) => {
    resetForm(form);
    setTimeout(()=>{
        formRef.value.clearValidate();
    },0);

    form.guaranteeId = guaranteeId;
    visible.value = true;
    isLoading.value = false;
}

defineExpose({openPopup});
</script>

<style lang="scss" scoped>

</style>
